<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2022-11-21 15:06:09
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 标记，未读数量
 * @FilePath: \basic-module\components\customUnread\customUnread.vue
-->
<template>
  <view class="badge" :class="{ 'isFixed': $slots.default }">
    <slot></slot>
    <view v-if="isDot" class="dot" :style="{ 'background': bdColor }"></view>
    <view v-else class="txt" :style="{ 'background': bdColor }">{{ value > max ? `${max}+` : value }}</view>
  </view>
</template>

<script>
export default {
  name: "badge",
  components: {},
  props: {
    value: {
      type: [String, Number],
      default: () => { },
    },
    max: {
      type: [String, Number],
      default: () => { },
    },
    bdColor: {
      type: String,
      default: "#ff5959",
    },
    isDot: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() { },
  onLoad(d) { },
  onShow() { },
  methods: {},
};
</script>
<style lang='less' scoped>
.badge {
  .flex(row, flex-start);
  position: relative;
}

.badge.isFixed {
  display: inline-block;

  .txt {
    position: absolute;
    top: -10upx;
    right: -50upx;
  }
}

.dot {
  width: 16upx;
  height: 16upx;
  border-radius: 50%;
}

.txt {
  width: auto;
  height: 32upx;
  line-height: 32upx;
  border-radius: 32upx;
  min-width: 32upx;
  padding: 0 4upx;
  font-size: 24upx;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
}
</style>